<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
            .active{
                color: red;
            }
            table{
              border: 1px solid #e9e9e9;
              border-collapse: collapse;
              border-spacing: 0;
            }
            th,td{
              padding: 8px 16px;
              border: 1px solid #e9e9e9;
              text-align: left;
            }
            th{
              background-color: #f7f7f7;
              color: #5c6b77;
              font-weight: 600;
            }
    </style>
</head>

<body>
    <!-- 
        需求:
        1.作出如图的展示效果

        2.点击购买加号则数量增加,总价格随之更变 

        3.如果书本数量为1则不能减少

        4.点击移除,删除该行,总价格随之更变

        5.使用VUE + HMLT 实现该案例

     -->
     <div id="app">
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showprice}}</td>
                        <td>
                            <button :disabled="item.count <= 1" @click="decream(index)">-</button>
                            {{item.count}}                                                        <!-- 数量中两边的"+"和"-"号 -->
                            <button @click="incream(index)">+</button>
                        </td>
                        <td><button @click="redis(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
                <h2>总价格：{{totalprice | showprice}}</h2>
    </div>
        <h1 v-else>购物车为空</h1>
</body>
    <script>
       new Vue({
	el:'#app',
	data:{
		books:[
		    {
				id: 1,
				name: "《java编程思想》",
				date: "2020-9",
				price: 98.00,
				count: 1
			},
			{
				id: 2,
				name: "《数据分析与数据原理》",
				date: '2019-2',
				price: 39.00,
				count: 1
			},
			{
				id: 3,
				name: "《Hadoop权威指南》",
				date: "2019-10",
				price: 59.00,
				count: 1
			},
			{
				id: 4,
				name: "《代码大全》",
				date: '2018-8',
				price: 128.00,
				count: 1
			}
		]
	},
	methods:{   //方法说明：
       
        //实现购买的商品添加的方法
		incream(index){
            this.books[index].count++
		},
        //实现购买的商品减少的方法
		decream(index){
			this.books[index].count--
		},
        //实现商品移除的方法
		redis(index){
			this.books.splice(index,1)
		}
	},
    //计算总价
	computed:{
		totalprice(){
			let st = 0           //根据索引遍历商品，总价=单价*数量，最后再加和
			for(let i=0; i<this.books.length;i++){
				st += this.books[i].price * this.books[i].count
			}
			return st
		}
	},
    //实现表单中价格这一项显示￥+数字的形式
	filters:{
        showprice(price){
			return '￥' + price.toFixed(2)     //结果保留两位小数
		}
	}
})
    </script>
</html>